<template>
  <el-table :data="data"
            fit
            size="small"
            :max-height="maxHeight"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            @row-click="rowClick"
            :span-method="objectSpanMethod"
  >
    <el-table-column
      type="index"
      width="50"
      :index="typeIndex"
    >
    </el-table-column>
    <template v-for="colConfig in colConfigs">
      <slot v-if="colConfig.slot" :name="colConfig.slot"/>
      <component
        v-else-if="colConfig.component"
        :is="colConfig.component"
        :col-config="colConfig"
        :data="data"
        @openImgVisible="openImgVisible"
        @fetchData="fetchData"
      >
      </component>
      <el-table-column v-else v-bind="colConfig" :show-overflow-tooltip="true"></el-table-column>
    </template>
  </el-table>
</template>

<script>
  export default {
    name: 'my-table',
    props: ['colConfigs', 'data', 'pageNum', 'pageSize', 'height', 'showSummary', 'spanArr', 'isSpanArr'],
    computed: {
      maxHeight: function() {
        return this.height ? this.height : 500
      }
    },
    methods: {
      typeIndex(index) {
        if (this.pageNum && this.pageSize) {
          return index + (this.pageNum - 1) * this.pageSize + 1
        } else {
          return index + 1
        }
      },
      openImgVisible(msg) {
        this.$emit('openVisible', msg)
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (column.property === 'contractAmount' || column.property === 'projectCost' || column.property === 'balancePayment' || column.property === 'billAmount' ||
            column.property === 'managementCost' || column.property === 'signatureCost' || column.property === 'auditCost' || column.property === 'otherCost' ||
            column.property === 'total') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return Math.round((prev + curr) * 10000) / 10000
              } else {
                return prev
              }
            }, 0)
            sums[index]
          } else {
            sums[index] = ''
          }
        })
        return sums
      },
      rowClick(row, event, column) { // 技术中心 项目信息选择获取选择行内容
        this.$emit('projectRowClick', row)
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 福利登记 合并行
        if (this.isSpanArr === 'welfaregive') {
          const content = column.property === 'content' ? columnIndex : ''
          const amount = column.property === 'amount' ? columnIndex : ''
          if (this.spanArr && (columnIndex !== content && columnIndex !== amount)) {
            const _row = this.spanArr[rowIndex]
            const _col = _row > 0 ? 1 : 0
            return {
              rowspan: _row,
              colspan: _col
            }
          }
        }
        if (this.isSpanArr === 'affiliated') {
          const contractCode = column.property === 'contractCode' ? columnIndex : ''
          const projectName = column.property === 'projectName' ? columnIndex : ''
          const partyA = column.property === 'partyA' ? columnIndex : ''
          const contractAmount = column.property === 'contractAmount' ? columnIndex : ''
          if (this.spanArr && (columnIndex === 0 || columnIndex === contractCode || columnIndex === projectName || columnIndex === partyA || columnIndex === contractAmount)) {
            const _row = this.spanArr[rowIndex]
            const _col = _row > 0 ? 1 : 0
            return {
              rowspan: _row,
              colspan: _col
            }
          }
        }
      },
      fetchData() {
        this.$emit('fetchData')
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
